:root {
  --canberra-yellow: #EDE210;
  --canberra-charcoal: #212424;
  --primary-color: #f7f7f7;
  --secondary-color: #212121;
  --lightgrey: #efefef;
  --darkgrey: #646464;
  --navbg: var(--canberra-charcoal);
  --navcol: #ffffff; 
  --linkcol: #000;
}
/* root variables cannot be used in media queries so here for reference only:
  36em/57.6rem phone (Small devices (landscape phones, 576px and up)
  48em/76.8rem tablet (Medium devices (tablets, 768px and up)
  62em/99.2rem desktop (Large devices (desktops, 992px and up)
  75em/120rem large desktop (Large devices (desktops, 1200px and up)
  120em/192rem Pro/designer desktop (Large devices (desktops, 1920px and up, e.g. most pro design screens) 
*//* Note: We use a mix of "em" and "rem" dimensions throughout this css. 
Therefore adjusting body font size will alter any media queries and other dimensions that are based on "em". 
Feel free to change but be aware of possible unintended consequences :)  */

body,.body {
  font-family: "freight-sans-pro", Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.8rem; 
}

h1,h2,h3,h4,h5,h6 {
  font-family: "freight-sans-pro", Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}

.heading {
  font-weight: 300;
  font-size: 5.6rem;
  line-height: 1.4;
  margin-top: 1.4rem;
  text-transform: none;
}

.subheading {
  letter-spacing: 4.29px;
  margin: 0;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
}

.hero-text {
  font-size: 4.8rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  margin-top: 0;
}

.lead {font-size:1.3em;}
.center {text-align:center;}/* ---------------------------------
    Navbar styles 
   --------------------------------- */
.navbar-section {
  padding-top: 0;
  padding-bottom: 0;
  /* navbar account name color */
  color: var(--navcol);
  /* navbar color */
  background-color: var(--navbg);
}

/* navbar links */
.navbar-section-content a { 
  text-transform: uppercase;
  font-weight: 500;
}

/* navbar icons text color */
.navbar-section .selection-count,
.navbar-section .avatar-user-dropdown,
.nav-icon-text,
/* mobile menu */
.navbar-section-content a,
.navbar-section-content .dropdown-button {
  color: var(--navcol);
}

/* myprofile circular border color */
.navbar-section .avatar-user-dropdown {
  border-color: var(--navcol);
}

/* dropdown */
.navbar-section-content .dropdown-button:hover,
.navbar-section-content .dropdown-button:focus-within {
  opacity: 0.7;
}

/* caret icon changes direction when menu is open - preview bar and search filters too */
.dropdown-button:focus-within .css-icon-caret-down,
.filter-name:focus-within .css-icon-caret-down {
  transform: rotate(180deg);
}

/* nav dropdown mobile */
.navbar-section-content .dropdown-content {
  background-color: var(--navbg);
  color: var(--navcol);
  border: none;
  width: max-content;
  box-shadow: none;
}

/* user dropdown */
.user-dropdown .dropdown-options {
  background-color: var(--navbg);
  color: var(--navcol);
  border: none;
}

.navbar-section-content .dropdown-content a:hover,
.user-dropdown .dropdown-options a:hover {
  background-color: var(--canberra-yellow);
  color: var(--navbg);
  opacity: 1;
}

/* bottom border transition - mobile only */
.navbar-section-content a::after {
  content: "";
  position: relative;
  display: block;
  width: 0;
  border-top: 2px solid var(--canberra-yellow);
  transition: width .4s;
}

/* bottom border on hover and active - mobile only */
.navbar-section-content a:hover::after,
.navbar-section-content a.active::after {
  width: 100%; 
}

/* Hide logo and account name on mobile */
.account-logo .logo {
  display: none; 
  max-height: 4rem;
}

.account-logo-mobile {
  left: auto;
  top: auto;
  width: 6rem;
  height: auto;
}

span.account-name {
  font-size: 1.6rem;
  display: none;
}


@media (min-width: 62em) {
  /* Adjust height and spacing for logo on desktop */
  .navbar-section {
    height: 15rem;
  }
  /* nav content */
  .navbar-section-content {
    gap: 3rem;
    margin-left: auto; /* moves content to middle */
  }
  .navbar-section-content a {
    border: 1px solid transparent;
    padding: 0.5rem 2rem;
    border-radius: 2rem;
    transition: border .4s;
  }
  /* hide underline on desktop - only shows for mobile */
  .navbar-section-content a::after {
    display: none;
  }
  .navbar-section-content a:hover,
  .navbar-section-content a.active {
    border-color: var(--canberra-yellow);
    opacity: 1;
  }
  .account-logo .logo,
  span.account-name {
    display:block;
    height: 7rem;
    max-height:10rem;
    padding:0 0;
  }	
  /* adjust red dot position desktop only */
  .notification-dot {
    top: 5.6rem;
}
}

/* adjust basket count position */
.selection-count {
    position: absolute;
    top: -1rem;
    right: -1rem;
    font-size: 1.2rem;
    color: #646464;
}
.footer-section {
  background-color: var(--canberra-yellow);
  color: var(--canberra-charcoal);
}

.footer-top {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 3rem;
  padding-top: 2rem;
}

.footer-top .footer-menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 2rem;
}

.footer-top .footer-menu-links {
  gap: 0;
  flex-wrap: wrap;
}

.footer-top .footer-menu a {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 2rem;
  padding: 1rem 2.8rem;
}

.footer-top .footer-menu a.external-link {
  border-top: 2px solid;
}

.footer-acknowledgement, .footer-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  font-size: 1.4rem;
}

.footer-acknowledgement p {margin: 0;}

.footer-acknowledgement {
  max-width: 40rem;
}

.footer-acknowledgement .caption, .footer-credit {
  font-weight: 600;
  margin-bottom: 2rem;
}

.footer-bottom a {
  color: var(--canberra-charcoal);
}

.footer-bottom a:hover {
  color: var(--canberra-charcoal);
}

@media (min-width:62em) {
  .footer-top .footer-menu {
    flex-direction: row;
  }
  
  .footer-top .footer-menu-links {
    margin-left: auto;
  }
  
  .footer-top .footer-menu a.external-link {
    border-left: 2px solid var(--canberra-charcoal);
    border-top: 0;
  }
}/* ---------------------
   Main Elements
   --------------------- */
.body {
  background-color: var(--primary-color);
}
.main {margin-top: 7rem;}
@media screen and (min-width: 62em) {.main {margin-top: 15rem;}}
.preview-mode .main {padding-top: 6rem;}

.welcome-paragraph {
  font-size:2rem;
}

mark {
	padding: 1rem 2rem;
	background-color: #f9d147;
    color: black;
}

/* fix code wrapping on mobile */
pre {
font-family: monospace,monospace;
font-size: 1em;
max-width: 100%;
overflow: auto;
white-space: normal;
}

/* ----------------
   Search widget
   ---------------- */

.search-section {
  max-width: 120rem;
  margin: 5rem auto; 	
}

.search-label{
  display: none;
}

.filters{
  justify-content: center;
}

.search-grid-section .page-actions, 
.search-grid-section .grid, 
.search-grid-section .assets-pagination {
  background-color: var(--primary-color);
  padding-bottom:4rem;  
}
.change-grid-view .icon-text {
display: none;
}

.file-icon::before{
  border-color: var(--primary-color) var(--primary-color) rgba(255, 255, 255, .3) rgba(255, 255, 255, .35);
}

/* ----------------
   Masonry view 
   ----------------- */
.masonry-asset {
  margin-bottom: 2rem;
  background-color: white;
  padding: 0;
  float: left;
}
.masonry-asset:hover {opacity:0.6;}
.masonry-asset .asset-grid-icon {position:relative;}
.masonry-asset .asset-grid-name {margin-left:0;}

/* ------------
Feed view 
---------------- */
.feed-view .asset-name {
	text-align:left;
  	justify-content:left;
}
.feed-view .asset-grid-name {
  font-size: 1.2em;
  text-align:left;
  font-weight:bold;
}
.feed-view .feed-asset-type-icon {display:none;}

/* ------------
   Gallery 
   ------------ */

/*-- Mobile --*/
.gallery-link,
.gallery-image {
  height: 8rem;
}

/*-- Desktop --*/
@media (min-aspect-ratio: 1/1) {
  .gallery-link,
  .gallery-image {
    height: 16rem;
  }
}


/* --------------
   Home Page 
   -------------- */
.intro-logo {
	max-width:20rem;
}


/* custom social links article */
.social-links {margin-top:5em;}
.social-links a {font-size:2rem;padding:1rem 2rem;}
/* end */

/* fix download form terms field separation issue */
.form-checkbox.terms {
margin: 5rem 0;
}/* Grid assets and Asset details page */

/* content additions */
.asset-info span:not(.asset-id, .asset-source):before,
.AssetView .asset-size:before,
.AssetView .asset-dimensions:before,
.AssetView .asset-word-count:before {
  content: ' • ';
}

.AssetView .asset-latitude:before {
  content:'Latitude: ';
}

.AssetView .asset-longitude:before {
  content:'Longitude: ';
}

.asset-source:before {
  content: 'src: ';
}

.asset-licence-value:before {
  content: ' -';
  margin-right: 0.5rem;
}

/* Hidden */
.asset-details-section .asset-type,
.asset-tags-title,
.asset-size-title,
.asset-dimensions-title,
.asset-created-at,
.asset-id-title,
.asset-licence-title,
.asset-word-count-title,
.collections-section-title {
  display: none;
}

/* Layout */

.asset-page-wrapper {
  padding: 2rem 2em;
}
@media (min-width:768px) {
  .asset-page-wrapper {
    padding: 6rem 6em;
  }
}

.asset-page-wrapper .section {
  padding: 1rem 0;
}

.asset-details-section {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.9rem;
}

.asset-details-section article {
  flex: 0 0 100%;
}                                                                                                       

.asset-details-section .asset-size,
.asset-details-section .asset-dimensions,
.asset-details-section .asset-extension,
.asset-details-section .asset-id,
.asset-details-section .asset-word-count {
  flex: 0 0 auto;
}

.related-assets-section {
  border-top: 1px dotted color-mix(in srgb, var(--color-body-text) 20%, transparent);
  padding-bottom: 4rem;
}

/* Grid area ordering */ 

.AssetView .asset-name {
  order: 1;
  width: 100%;
}

.AssetView .asset-type-icon {
  order: 2;
}

.AssetView .asset-id {
  order: 3;
}

.AssetView .asset-word-count {
  order: 4;
}

.AssetView .asset-size {
  order: 5;
}

.AssetView .asset-dimensions {
  order: 6;
}

.AssetView .asset-description {
  order: 7;
}

.AssetView .asset-ai-description {
  order: 7;
}

.AssetView .asset-licence {
  order: 8;
}

.AssetView .asset-terms-of-use {
  order: 9;
  padding-bottom: 1rem;
}

.AssetView .asset-expiry-date {
  order: 10;
}

.AssetView .asset-created-at {
  order: 12;
}

.AssetView .asset-credit {
  order: 13;
}

.AssetView .asset-usage {
  order: 14;
}

.AssetView .asset-reference {
  order: 15;
}

.AssetView .asset-account {
  order: 15;
}

.AssetView .asset-location {
  order: 16;
}

.asset-page-wrapper {
  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "details details details"  "tags tags tags" "actions actions actions";
}
.asset-page-wrapper.post {
  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "tags tags tags" "actions actions actions";
}

@media (min-width:36em) {
  .asset-page-wrapper .section {padding: 0;}
  .asset-page-wrapper .asset-tags-section {padding: 3rem 0;}
  .asset-proxy-section {margin-right: 5rem;}
  .asset-page-wrapper {
    grid-template-areas: "breadcrumb actions actions" "proxy proxy details" "proxy proxy tags";
  }
  .asset-page-wrapper.post {
    grid-template-areas: "breadcrumb actions actions" "proxy proxy proxy" "tags tags tags";
  }
}
/* Sign Up Page styles */
.new-account-section .form-section {
  background-color:transparent;
  padding:0;
}

.new-account-hint {font-size:2.5rem;}

.new-account-section .form-section form {
  background-color:antiquewhite;
  border-radius:1em;
  padding:1em;
}

@media screen and (min-width: 75em) {
  .new-account-section .form-section {
    width: 33vw;
    min-width:30em;
    margin:1em auto;
    background-color:transparent;
  }
  .new-account-section .form-section form {
    background-color:antiquewhite;
    border-radius:1em;
    padding:2em;
  }
  .new-account-section .new-account-embeded-image {
    padding:3rem;
    max-width:66vw;
  }
  blockquote {padding:2em;}
  blockquote span {
    display:block;
    width:100%;
    font-size:2.2rem;
    font-weight:bold;
  }
  blockquote cite {
    display:block;
    width:100%;
    font-size:1em;
    text-align:center;
  }	
  .signup-faq {
    margin:2.5%;
    text-align:left!important;
    padding-top:1em;
  }
}
.desktop {display:none;}

@media screen and (min-width: 62em){
  .desktop {display:block;}
  .mobile {display:none;}
}

/* faq styles */
dl {
  column-count: 1;
  column-gap: 0rem;
}

.fw dl {
  column-count: 1;
  column-gap: 0rem;
}
@media (min-width:48em) {
  dl {
    column-count: 2;
    column-gap: 5rem;
  }
  .fw dl {
    column-count: 3;
    column-gap: 5rem;
  }
}

dt {font-weight:bold;}
dt.subtitle {
  border-bottom: 2px solid #000;
  margin:2rem 0;
}
dt.subtitle:first-child {
  border-bottom: 2px solid #000;
  margin:0 0 2rem 0;
}
dd {margin-bottom:1rem;}
.bk-wall .brandkit-logo,
.bk-wall .logo {
  max-height: 20rem;
}

@media screen and (min-width: 36em) {
  .bk-wall {
    margin: 10em auto 4em auto;
    padding:3rem 6rem
  }
}

@media screen and (min-width: 48em) {
  .bk-wall {
    margin: 10em 4em;
  }
}
.reset-password-section {
  background-color:#fff;
  width:fit-content;
  margin:0 4em;
}/* full width section */
.fw {padding:4em 0;}

@media (min-width:77rem) {
  .fw {
    width:100vw;
    padding:4em 0;
  } 
}

/* full height section */
.fh {
  padding-top:0;
  padding-bottom:0;
}

/* two column grids used throughout site */
.two-col-grid {
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(min-content, max-content);
  grid-column-gap: 2em;
  grid-row-gap:2em;
}
.two-col-grid article {
  display:grid;
  grid-auto-rows: minmax(min-content, max-content);
}

#features img {
  border-radius: 2em;
}

#features .two-col-grid {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0;
}

/* Tablet Breakpoint 768px / 16px = 48em */
@media (min-width:48em) {
  .two-col-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 6em;
    grid-row-gap:6em;
  }
  .two-col-grid h1, .two-col-grid h2 {
  }
} 

@media (min-width: 62em) {
  #features .two-col-grid:nth-child(even) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
  
  #features .two-col-grid {
    flex-direction: row;
    gap: 6em;
    margin-top: 2em;
    margin-bottom: 2em;
  }
  
  #features .two-col-grid article {
    width: 50%;
  }
}
/* end 2 col grid */

/* 3 column grids used throughout site */
.three-col-grid {
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(min-content, max-content);
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}
.three-col-grid article {
  display:grid;
  grid-auto-rows: minmax(min-content, max-content);
}

/* Tablet Breakpoint 768px / 16px = 48em */
@media (min-width:48em) {
  .three-col-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 4em;
    grid-row-gap:4em;
  }
}
/*  Desktop Breakpoint 1200px / 16px = 75em*/ 
@media (min-width:75em) {
  .three-col-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 4em;
    grid-row-gap:4em;
  }
  .three-col-grid h1, .three-col-grid h2 {
  }
}  
/* end 3 col grid */

/* 4 column grids used throughout site */
.four-col-grid {
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(min-content, max-content);
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}
.four-col-grid article {
  display:grid;
  grid-auto-rows: minmax(min-content, max-content);
}
/*  Desktop Breakpoint 768px / 16px = 48em */ 
@media (min-width:48em) {
  .four-col-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 2em;
    grid-row-gap:2em;
  }
}
/*  Desktop Breakpoint 1200px / 16px = 75em */   
@media (min-width:75em) {
  .four-col-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 2em;
    grid-row-gap:2em;
  }
}  
/* end 4 col grid */section .intro, #intro {
  text-align:center;
  padding-bottom:3rem; /* reset padding on sections */
}
section.blackbg {
  background-color: #121212;
  color: #fff!important;
}
section.whitebg {
  background-color: #fff;
  color: #000!important;
}
.search-grid-section .assets-pagination {
    padding-bottom: 2rem; /* reset padding on sections */
}
/* reset section padding on occasion */
.tight-bottom {padding-bottom:0;}
.tight-top {padding-top:0;}
.tight-left {padding-left:0;}
.tight-right {padding-right:0;}

/* html section */
.html-section {
  width:100vw;
  padding-top:3rem;/* reset padding on sections */
  padding-left:2em;
  padding-right:2em;
  padding-bottom:3rem;/* reset padding on sections */
}
.html-section img {margin:2em auto;}
.html-section p img {margin:0 auto;}
.html-section:first-child {padding-top:6rem;}

@media (min-width:62em) {
  .html-section {
    padding-left:3em; 
    padding-right:3em;  
  }
}  
@media (min-width:75em) {
  .html-section {
    padding-left:calc(50vw - 34.5em); 
    padding-right:calc(50vw - 34.5em);   
  }
}  
@media (min-width:120em) {
  .html-section {
    padding-left:calc(55vw - 45em); 
    padding-right:calc(55vw - 45em);  
  }
}.button {
  color: var(--color-button-text);
  background-color: var(--color-button-bg);
}/* Albums widget */
.albums-grid .album {
  aspect-ratio: 3 / 2; /* sets aspect ratio of album covers consistently when height is calculated */
  width: 100%;
  height: -webkit-fit-content;
}

.albums-grid .album-cover, .albums-horizontal-grid .album-cover {
  min-height: auto; 
}

.albums-grid .album-cover.transparent, 
.albums-horizontal-grid .album-cover.transparent {
  background-color: var(--canberra-charcoal);
  background-image: none;
}

.album-cover, .album-with-no-cover {
  border: none;
}

.album-cover:hover, .album-with-no-cover:hover {
  border: none;
}

/* new album select state */
a.album-selected {
  border: none;
  box-shadow: none;
}
a.album-selected img, a.album-selected div.album-with-no-cover,
a.album-selected img:hover, a.album-selected div.album-with-no-cover:hover {
  border: 5px solid var(--canberra-yellow);
  box-shadow: 0 15px 25px 1px #ccc;
}
a.album-selected span.album-title {
  font-weight: bold;
}
/* end album select state */
a.album:hover {
  opacity: 1;
}

.albums-horizontal-grid {
  margin-top: -13.5rem; /* overlap with hero */
}

.albums-horizontal-grid .album {
  width: -webkit-max-content; /* maintain column width */
  position: relative;
}


.albums-horizontal-grid .album-wrapper {
  grid-gap: 0;
}

.albums-horizontal-grid .album-cover {
  border-radius: 0;
  width: 15rem;
  height: 22.5rem;
  object-fit: cover;
}

.albums-horizontal-grid .album-title {
  position: absolute;
  width: 100%;
  text-align: left;
  display: flex;
  height: 100%;
  align-items: flex-end;
  margin: 0;
  background: linear-gradient(360deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.3rem;
  padding: 2rem;
  text-decoration: underline;
  text-decoration-color: var(--canberra-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5rem;
}

.albums-horizontal-grid a.album:hover .album-title,
.albums-horizontal-grid a.album-selected .album-title {
    background: linear-gradient(360deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .1) 100%);
} 

/* desktop - rows of three */
@media screen and (min-width: 62em) {
  .albums-horizontal-grid .album-cover {
 	border-radius: 0;
	width: 15rem;
	height: 22.5rem;
	object-fit: cover;
  }
}

.collections-horizontal-grid .collection-cover, .collections-horizontal-grid .collection-with-no-cover {border: none;}
.search-box-section .img-overlay {
  display: none;
}

.assets-button {
  background-color: var(--canberra-yellow);
  border-radius: 4rem;
}

.clear-search-button {
  border-radius: 4rem;
  width: 6rem;
  background-color: var(--canberra-yellow);
  border: 2px solid #fff;
}

.assets-button:hover {
  background-color: var(--canberra-charcoal);
  opacity: 1;
}

.search-box {
  border-radius: 4rem;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.11);
}

.search-box-input::placeholder {
  font-style: italic;
  color: #ccc;
}

@media screen and (max-width: 36em) {.search-box input{font-size: 85%;}}

@media screen and (min-width: 62em) {
  .search-box-section img {
    height: 74vh;
  }
  
  .desktop .search-box-component {
    /* width: 50vw;*/
  }
  
  .search-box-content {
    justify-content:;
    padding: 10rem;
  }
}

/* filters */
.filters{
  justify-content: center;
}

.filter-options {
  z-index: 2
}

.filter-options .filter-option:hover {
  color: var(--canberra-charcoal);
  background-color: var(--canberra-yellow);
}

.filter-options .filter-option.selected {
  font-weight: bold;
  background-color: transparent;
  color: #111;
}

.filter-button:hover {
  background-color: var(--canberra-yellow);
}

/* show the Search label and the And/Or toggle in the Search Grid */
label.search-label {
  display: block;
  padding-left: 1.4em;
}